<!-- version 1.0.0 -->
<style>
    .clearfix { overflow: auto;  zoom: 1; }
    .forum-wrap {  background-color: white  }
    .forum-page-nav { font-size: 12px;  color: #333 }
    .forum-name em {  font-style: normal;}
    .forum-name a { color: #999;}
    .forum-header {  font-size: 12px;  height: 57px;  line-height: 57px;  color: #999;  background-color: #f7f7f7;  border-top: 3px solid #e9e9e9;  }
    .forum-header h1 {  display: inline-block;  padding-left: 10px;  vertical-align: bottom;  font-size: 18px;  color: #333  }
    .forum-header span {  color: orange;  }
    .posts-menu {  font-size: 14px;  margin: 5px 0;  }
    .posts-menu a {display: inline-block; float: right; color: #666;  line-height: 34px;  padding: 0 13px;  margin-left: 10px;  border: 1px solid #e9e9e9; }
    .posts-menu a:hover {  color: red;}
    .posts-menu a.new-post { background-color: #f60; border: 1px solid #f60; color: white;  }
    .posts-wrap {  min-height: 600px;}
    .posts-wrap .posts-header { background-color: #f2f2f2;}
    .posts-header { display: flex; }
    .posts-header span {font-size: 12px;line-height: 35px; font-weight: 500;}
    .posts-header span.title { flex: 50%;height: 35px;line-height: 35px;padding-left: 10px;font-size: 14px;font-weight: 700;}
    .posts-header span.num {flex: 1;}
    .posts-header span.author, span.last { width: 150px;}
    .posts-content {border: 1px solid #eee;}
    .posts-content .posts-item {display: flex;padding: 5px;border-top: 1px solid #eee;}
    .posts-item:hover {background-color: #f2f2f2;}
    .posts-item .posts-title {flex: 50%;padding-left: 10px; overflow: hidden;}
    .posts-item a {color: #111;line-height: 37px;}
    .posts-item a:hover { color: red;text-decoration: double;}
    .posts-item .author-info { width: 150px;}
    .posts-item div > span, em {display: block;font-style: normal;font-size: 12px;}
    .posts-item div > em {color: #999;}
    .posts-item .reply-num {flex: 1 ;}
    .posts-item .last-reply {width: 150px;}
    .selected {background-color: #179b16;color: white !important;}
    .checkin{background-color: cadetblue;}
    @media (max-width: 1000px) {
        .posts-wrap {}
        .posts-wrap .posts-header {display: none;}
        .posts-item .reply-num { display: none;}
        .posts-item .last-reply {display: none;}
        .posts-menu{display: flex;}
        .posts-menu a {flex: 1;float: none;font-size: 12px;padding: 2px;text-align: center; margin: 0}
        .js-detail {white-space:nowrap}
        .posts-item .posts-title {flex: 100%;padding-left: 10px; overflow: hidden; white-space:nowrap}
        .author-info{white-space:nowrap;padding-left: 10px}
    }
    .page-wrap{text-align: center}
    .pagination{display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;}
    .pagination li {display: inline-block;}
    .pagination li a {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination li span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #333;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination>li:first-child>a{margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
    .pagination>li:last-child>a{border-top-right-radius: 4px;  border-bottom-right-radius: 4px;}
</style>

<div class="forum-wrap">
    <div class="container">
        <div class="wrap bc-info no-init" id="forum-info" data-port='http://api.hongyanche.com/forum/label_list'>
            <div class="forum-header">
                <div id='label-info' class='container'>
                    <h1>
                        <a href="http://api.hongyanche.com/home#forum">论坛</a> >  <cn info=1></cn>&nbsp;&nbsp;
                    </h1>
                    主题：<span><count info=1></count></span>&nbsp;&nbsp;
                    回复： <span><reply_amount info=1></reply_amount></span>
                </div>
            </div>
            <div class="posts-menu clearfix">
                <!--<div class="new-posts-btn">-->
                <a class="new-post" href="#forum_new_post">发布新帖</a>
                <!--<a href="javascript:void(0)" >回复时间</a>-->
                <a class="js-is-select" href="javascript:void(0)" id="create_time">发布时间</a>
                <a class="js-is-select" href="javascript:void(0)" id="reply_amount">回复数量</a>
                <a class="js-is-select" href="javascript:void(0)" id="browse">浏览次数</a>
                <a class="checkin" href="javascript:void(0)" style="color: white;">签到</a>
                <moderator info=d>
                    <a href="javascript:void(0)" id="apply" class="js-is-select">待审核</a>
                </moderator>
                <!--</div>-->
            </div>
        </div>

        <div class="posts-wrap">
            <div class="posts-header">
                <span class="title">标题</span>
                <span class="author">作者</span>
                <span class="num">回复/查看</span>
                <span class="last">最后回复</span>
            </div>
            <div class="posts-content">
                <div id="forum-list" class="bc-list" data-port="http://api.hongyanche.com/forum/forum_list">
                    <input autocomplete='off' class='hidden' id='label_id' name='label_id'/>
                    <input autocomplete='off' class='hidden' id='keywords' name=''/>
                    <input autocomplete="off" class="hidden" id="page" name="page">
                    <div class="bc-list-template">
                        <div class="posts-item">
                            <div class="posts-title" style="vertical-align: middle">
                                <top list=d>
                                    <span class="jinghua" style="display: inline-block; line-height: 37px"><img style="vertical-align: middle" src="http://api.hongyanche.com/_hongyanche/material/top.gif" alt=""></span>
                                </top>
                                <highlight list=d>
                                    <span class="jinghua" style="display: inline-block; line-height: 37px"><img style="vertical-align: middle; width: 18px;" src="http://api.hongyanche.com/_hongyanche/material/good.png" alt=""></span>
                                </highlight>
                                <a class="js-detail" style="display: inline-block;" href="javascript:void(0)">
                                    <!--<tag list=d style="display: inline-block;">[<tag list=1></tag>]</tag>--><title list=1 style="display: inline-block;"></title>
                                </a>
                                <forum_id list=1 class="hidden"></forum_id>
                            </div>
                            <div class="author-info">
                                <span>
                                    <user_name list=1></user_name>
                                </span>
                                <em>
                                    <create_time list=1></create_time>
                                </em>
                            </div>
                            <div class="reply-num">
                                <span>
                                    <reply_amount list=1>0</reply_amount>
                                </span>
                                <em>
                                    <browse list=1>0</browse>
                                </em>
                            </div>
                            <div class="last-reply">
                                <span>
                                    <last_user_name list=1></last_user_name>
                                </span>
                                <em>
                                    <last_time list=1></last_time>
                                </em>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-wrap">
                    <ul id="page-btn" class="pagination"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('#forum-list').on('bc-list-success', function () {
        $('.weui-loadmore').html(LIST.page)
    });

    function ajax_page(num) {
        $('#page').val(num);
        LIST.reload('#forum-list');
    }
    INFO.reload('#label-info', {label_id: GET('label_id')});
    (function (w, u) {
        $('#label_id').val(GET('label_id'));
    })(window, undefined);
    //    $('#create_time').click(function () {
    //        $('#keywords').val(1);
    //        $("#keywords").attr("name","create_time");
    //        LIST.reload('#forum-list');
    //    });

    $('#forum-info').on('click','#create_time',function () {
        if($(this).hasClass('selected')){
            $('.js-is-select').removeClass('selected');
            $("#keywords").attr("name", "type");
            $('#keywords').val('');
            $('#page').val(1);
            LIST.reload('#forum-list');
            return;
        }
        $('.js-is-select').removeClass('selected');
        $(this).addClass('selected');
        $("#keywords").attr("name", "type");
        $('#keywords').val('create_time');
        $('#page').val(1);
        LIST.reload('#forum-list');
    });
    $('#forum-info').on('click', '#reply_amount', function () {
        if($(this).hasClass('selected')){
            $('.js-is-select').removeClass('selected');
            $("#keywords").attr("name", "type");
            $('#keywords').val('');
            $('#page').val(1);
            LIST.reload('#forum-list');
            return;
        }
        $('.js-is-select').removeClass('selected');
        $(this).addClass('selected');
        $("#keywords").attr("name", "type");
        $('#keywords').val('reply_amount');
        $('#page').val(1);
        LIST.reload('#forum-list');
    });
    $('#forum-info').on('click', '#browse', function () {
        if($(this).hasClass('selected')){
            $('.js-is-select').removeClass('selected');
            $("#keywords").attr("name", "type");
            $('#keywords').val('');
            $('#page').val(1);
            LIST.reload('#forum-list');
            return;
        }
        $('.js-is-select').removeClass('selected');
        $(this).addClass('selected');
        $("#keywords").attr("name", "type");
        $('#keywords').val('browse');
        $('#page').val(1);
        LIST.reload('#forum-list');
        browse = true;
    });
    $('#forum-info').on('click','#apply',function () {
        if($(this).hasClass('selected')){
            $('.js-is-select').removeClass('selected');
            $("#keywords").attr("name", "type");
            $('#keywords').val('');
            $('#page').val(1);
            LIST.reload('#forum-list');
            return;
        }
        $('.js-is-select').removeClass('selected');
        $(this).addClass('selected');
        $("#keywords").attr("name", "type");
        $('#keywords').val('apply');
        $('#page').val(1);
        LIST.reload('#forum-list');
    });

    //跳转到帖子详情页
    $('#forum-list').on('click', '.js-detail', function () {
        var postId = $(this).next().text();
        window.location.href = 'home?forum_id=' + postId + '#forum_article_detail'
    });
    $('#forum-info').on('click','.checkin' ,function () {
        $.ajax({
            url: '/forum/sign',
            type: 'GET',
            success: function (data) {
                if(data.state){
                    return TOAST.success("成功", ' ', 2);
                }else{
                    return TOAST.wran(data.errormsg, ' ', 2);
                }
            }
        })
    });
    // apply
</script>
